<template>
  <div class="data-catalog-content">
    <div class="data-catalog-left">
      <div class="title-left">
        <el-icon>
          <SvgIcon name="menu-management"></SvgIcon>
        </el-icon>
        <span>数据目录</span>
      </div>
      <el-input v-model="input" class="w-50 m-2" prefix-icon="Search" />
      <el-scrollbar>
        <el-tree
          :data="dataSource"
          node-key="id"
          default-expand-all
          :expand-on-click-node="false"
        >
          <template #default="{ node, data }">
            <span class="custom-tree-node">
              <span class="tree-label">
                <el-icon>
                  <SvgIcon :name="data.icon"></SvgIcon>
                </el-icon>
                {{ node.label }}</span
              >
              <span>
                <i
                  class="icon el-icon-circle-plus"
                  style="color: #00baff"
                  @click="addCatalog"
                ></i>
                <i class="icon el-icon-edit" style="color: #00baff"></i>
                <i class="icon el-icon-delete" style="color: #ff5b5b"></i>
              </span>
            </span>
          </template>
        </el-tree>
      </el-scrollbar>
    </div>
    <div class="data-catalog-right">
      <div class="query-content">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="数据名称">
            <el-input v-model="formInline.user" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="服务类型">
            <el-select v-model="formInline.region" placeholder="请选择">
              <el-option label="是" value="shanghai" />
              <el-option label="否" value="beijing" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" class="queryButton" @click="onSubmit"
              >查询</el-button
            >
            <el-button type="primary" class="resetButton" @click="onSubmit"
              >重置</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div class="table-content">
        <el-button
          class="addButton"
          type="primary"
          @click="handleMountedClick"
          v-if="currentUser?.hasPermission('sjmlglmount')"
        >
          <el-icon>
            <SvgIcon name="mount"></SvgIcon>
          </el-icon>
          {{ currentUser?.getButtonName('sjmlglmount') }}
        </el-button>
        <div class="table">
          <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column
              prop="dataName"
              align="center"
              label="数据名称"
              width="180"
            />
            <el-table-column
              prop="dataType"
              label="数据类型"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="serviceUrl"
              label="服务地址"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="mountedTime"
              label="挂载时间"
              show-overflow-tooltip
            />
            <el-table-column label="操作">
              <template #default="scope">
                <el-button
                  text
                  type="text"
                  style="color: #28b1e4; padding: 0"
                  @click="handleEditClick(scope.row)"
                  v-if="
                    currentUser?.hasPermission('sjmlgledit')
                  "
                >
                  {{ currentUser?.getButtonName('sjmlgledit') }}
                </el-button>
                <el-button
                  text
                  type="text"
                  style="color: #fa3434"
                  v-if="
                    currentUser?.hasPermission('sjmlgldelete')
                  "
                >
                  {{ currentUser?.getButtonName('sjmlgldelete') }}
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <el-pagination background layout="prev, pager, next" :total="1000" />
      </div>
    </div>
    <add-catalog-dialog
      :visible="visible"
      @closeDialog="closeDialog"
    ></add-catalog-dialog>
    <mounted-catalog
      :visible="mountedCatalogVisible"
      :service-type-dict="serviceType"
      @closeDialog="handleMountedClose"
    ></mounted-catalog>
  </div>
</template>

<script setup lang="ts">
import { getCurrentInstance, reactive, ref } from 'vue'
import AddCatalogDialog from '@/views/backend-management/components/data-catalog/components/addCatalogDialog.vue'
// import SvgIcon from '@/components/svg-icon/SvgIcon.vue'
import MountedCatalog from '@/views/backend-management/components/data-catalog/components/mountedCatalog.vue'
import type { OptionData } from '@/utils/type'
// import { useCurrentUserStore } from '@/stores/current-user'
import { PERMISSIONS } from '@/common/user'
import ElScrollbar from 'element-ui/lib/scrollbar'

const vm = getCurrentInstance()
const store = vm.proxy.$store

const currentUser = store.state.user.currentUser

interface Tree {
  id: number
  label: string
  icon: string
  children?: Tree[]
}

interface DataCatalogItem {
  dataName: string
  dataType: string
  serviceUrl: string
  mountedTime: string
  pkid: string
}

// const { currentUser } = useCurrentUserStore()

const input = ref<string>('')
const visible = ref(false)
const mountedCatalogVisible = ref(false)

const serviceType = ref<OptionData[]>([
  {
    label: 'WMS',
    value: 'wms',
  },
  {
    label: 'WMTS',
    value: 'wmts',
  },
])

const formInline = reactive({
  user: '',
  region: '',
})

const tableData = ref<DataCatalogItem[]>([
  {
    dataName: '普通底图',
    dataType: 'wmts',
    serviceUrl: 'http://yuanxing.caupdwest.com',
    mountedTime: '2022-02-12 14:25:24',
    pkid: '1233',
  },
  {
    dataName: '普通底图',
    dataType: 'wmts',
    serviceUrl: 'http://yuanxing.caupdwest.com',
    mountedTime: '2022-02-12 14:25:24',
    pkid: '1233',
  },
  {
    dataName: '普通底图',
    dataType: 'wmts',
    serviceUrl: 'http://yuanxing.caupdwest.com',
    mountedTime: '2022-02-12 14:25:24',
    pkid: '1233',
  },
  {
    dataName: '普通底图',
    dataType: 'shape',
    serviceUrl: 'http://yuanxing.caupdwest.com',
    mountedTime: '2022-02-12 14:25:24',
    pkid: '1233',
  },
  {
    dataName: '普通底图',
    dataType: 'wmts',
    serviceUrl: 'http://yuanxing.caupdwest.com',
    mountedTime: '2022-02-12 14:25:24',
    pkid: '1233',
  },
  {
    dataName: '普通底图',
    dataType: 'wmts',
    serviceUrl: 'http://yuanxing.caupdwest.com',
    mountedTime: '2022-02-12 14:25:24',
    pkid: '1233',
  },
  {
    dataName: '普通底图',
    dataType: 'wmts',
    serviceUrl: 'http://yuanxing.caupdwest.com',
    mountedTime: '2022-02-12 14:25:24',
    pkid: '1233',
  },
])

const dataSource = ref<Tree[]>([
  {
    id: 1,
    label: '社区',
    icon: 'community',
    children: [
      {
        id: 2,
        icon: 'basic-community-information',
        label: '社区基础信息',
      },
      {
        id: 3,
        icon: 'community-governance',
        label: '社区治理',
      },
    ],
  },
  {
    id: 4,
    icon: 'facilities',
    label: '设施',
    children: [
      {
        id: 5,
        icon: 'public-service-facilities',
        label: '公共服务设施',
      },
      {
        id: 6,
        icon: 'commercial-service-facilities',
        label: '商业服务设施',
      },
      {
        id: 7,
        icon: 'municipal-supporting-facilities',
        label: '市政配套设施',
      },
      {
        id: 8,
        icon: 'public-activity-space',
        label: '公共活动空间',
      },
      {
        id: 9,
        icon: 'community-characteristic-facilities',
        label: '社区特色设施',
      },
      {
        id: 10,
        icon: 'convenience-service',
        label: '便民服务设施',
      },
    ],
  },
  {
    id: 11,
    icon: 'project',
    label: '项目',
    children: [
      {
        id: 12,
        icon: 'opportunity-list',
        label: '机会清单',
      },
      {
        id: 13,
        icon: 'project-management',
        label: '项目管理',
      },
    ],
  },
])

const onSubmit = () => {
  console.log('submit!')
}

const handleEditClick = (item: DataCatalogItem) => {
  console.log(item)
}
const addCatalog = () => {
  visible.value = true
}
const closeDialog = () => {
  visible.value = false
}

const handleMountedClose = () => {
  mountedCatalogVisible.value = false
}

const handleMountedClick = () => {
  mountedCatalogVisible.value = true
}
</script>

<style lang="scss" scoped>
.data-catalog-content {
  width: 100%;
  height: calc(100% - 27px);
  background-color: white;
  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
  border-radius: 2px;
  display: flex;

  .data-catalog-left {
    display: flex;
    flex-direction: column;

    height: 100%;
    width: 318px;
    border-right: 1px solid #eeeff5;

    .title-left {
      height: 50px;
      padding: 0 21px;
      display: flex;
      align-items: center;

      :deep(.el-icon) {
        margin-right: 8px;
        svg {
          color: #28b1e4;
        }
      }

      span {
        font-size: 14px;
        font-weight: bold;
        color: #000000;
      }
    }

    :deep(.el-input) {
      margin-top: 6px;
      margin-bottom: 12px;
      padding: 0 21px;
    }

    :deep(.el-scrollbar) {
      flex: 1;
      padding: 0 21px 16px 21px;

      .el-scrollbar__wrap {
        .el-scrollbar__view {
          height: 100%;

          .el-tree {
            height: 100%;

            .el-tree-node {
              .svg-icon {
                svg {
                  width: 16px;
                  height: 16px;
                  color: #333333;
                }
              }
            }

            .tree-label {
              i {
                vertical-align: sub;
              }
            }

            .custom-tree-node {
              width: 100%;
              span:last-child {
                float: right;
                width: 62px;
                display: flex;
                justify-content: space-around;
                margin-top: 2.5px;
              }
            }
          }
        }
      }
    }
  }

  .data-catalog-right {
    width: calc(100% - 319px);
  }

  .query-content {
    padding-left: 20px;
    width: 100%;
    height: 62px;
    line-height: 62px;
    border-bottom: 1px solid #eeeff5;

    :deep(.el-form) {
      .el-form-item {
        margin-bottom: 0;

        .resetButton {
          width: 80px;
          height: 32px;
          color: #28b1e4;
          background: #ffffff;
          border: 1px solid #28b1e4;
          border-radius: 2px;
        }

        .queryButton {
          width: 80px;
          height: 32px;
          background: #28b1e4;
          border-radius: 2px;
        }
      }
    }
  }

  .table-content {
    width: 100%;
    height: calc(100% - 63px);

    .addButton {
      margin-left: 20px;
      margin-top: 14px;
      margin-bottom: 14px;
      width: 100px;
      height: 32px;
      background: #28b1e4;
      border-radius: 2px;
      border: none;
      padding: 0;
      :deep(.el-icon) {
        margin-right: 6px;
      }
    }

    .table {
      width: 100%;
      padding: 0 18px;
      height: calc(100% - 77px - 32px - 28px);
      overflow-y: auto;

      :deep(.el-table__row--striped) {
        background: #f7f9fb;
      }
    }

    .el-pagination {
      margin-top: 15px;
      justify-content: end;
      margin-right: 18px;
    }
  }
}
</style>
